<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>局部组件</title>
	
	</head>
	<body>
		
	<div id="app">
		<home></home>
		<dog></dog>
	</div>
	
	<template id="homeTem">
		<div>
			<h1>
			{{name}}
			</h1>
			<dog></dog>
		</div>
		
	</template>
	
	<template id="dogTem">
		<div>
			<h1>
			{{name}}
			</h1>
		</div>
		
	</template>
		
		
		<script src="../js/vue.js"></script>
		<script>
			
			let dog={
				data(){
					return {
						name:"哈士奇"
					}
				},
				template:"#dogTem"
			}
			
			
			
			
			let home={
				data(){
					return {
						name:"这里是家"
					}
				},
				template:"#homeTem",
				//定义嵌套组件
				components:{
					dog
				}
			}
			
		
			
			const app=new Vue({
				el:"#app",
				//局部组件
				components:{
					//
					home,//home:home
					dog//局部组件
				}
			})
			
			
		
			
		</script>
	
	
	
	</body>
</html>
